<template>
  <view class="baseWrap">
    <view class="itemWrap" v-for="item of info" :key="item.type">
      <text class="title">{{item.title}}</text>
      <view>
        <text class="info">{{item.info}}</text>
        <text class="iconfont icon-qianjin" @click="handleChange(item.type)"></text>
		<u-picker 
		    :show="showGender"
		    :columns="columns"
		    cancelText="取消"
		    cancelColor="#ccc"
		    confirmText="确认"
		    confirmColor="rgb(31, 182, 131)"
		    keyName="label"
		    :closeOnClickOverlay="true"
		    @confirm="genderConfirm"
			@cancel="closePicker"
		    >
		</u-picker>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  data () {
    return {
      value: '',
      user: this.$store.state.auth.userInfo,
      showGender: false,
      columns:[
        [{
          label: '男生',
          gender: '1'
        },
        {
          label: '女生',
          gender: '2'
        }]
	  ]
    }
  },
  computed: {
    info () {
      const userInfo = this.user
      const info = [
        {
          title: '昵称:',
          type: 'nickname',
          info: userInfo.nickname
        },
        {
          title: '性别:',
          type: 'gender',
          info: userInfo.gender === '1' ? '男' : '女'
        },
        {
          title: '地区:',
          type: 'loaction',
          info: userInfo.location
        },
        {
          title: '个性签名:',
          type: 'sign',
          info: userInfo.sign
        }
      ]
      return info
    }
  },
  watch: {
    // 'user.location' (n, o) {
    //   this.sendApi()
    // }
  },
  methods: {
    handleChange (type) {
      if (type === 'nickname') {
        const this_ = this
        uni.showModal({
          title: '为自己取一个好听的名字吧！',
          cancelColor: 'rgb(97,97,97)',
          confirmColor: 'rgb(31, 182, 131)',
          editable: true,//是否显示输入框
          placeholderText: '请输入昵称',//显示输入框时的提示文本
          success: function (res) {
            if (res.confirm) {
              this_.user.nickname = res.content
			  this_.$store.commit('setUserInfo',this_.user)
            }
          }
        })
      } else if (type === 'gender') {
        this.showGender = true
      } else if (type === 'loaction') {
        uni.navigateTo({ url: '/subcom-my/Location/Location' })
      } else if (type === 'sign') {
        const this_ = this
        uni.showModal({
          title: '为自己编写一段个性签名吧！',
          cancelColor: 'rgb(97,97,97)',
          confirmColor: 'rgb(31, 182, 131)',
          editable: true,//是否显示输入框
          placeholderText: '请输入个性签名',
          success: function (res) {
            if (res.confirm) {
              this_.user.sign = res.content
			  this_.$store.commit('setUserInfo',this_.user)
            }
          }
        })
      }
    },
    genderConfirm (e) {
		console.log(e.value[0].gender)
		this.user.gender = e.value[0].gender
		this.$store.commit('setUserInfo',this.user)
		this.showGender = false
    },
	closePicker(){
		this.showGender = false
	}
  }
}
</script>

<style lang="scss" scoped>
.baseWrap {
	width: 750rpx;
	height: auto;
	box-sizing: border-box;
	padding: 20rpx;
  .itemWrap {
    height: 120rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: $u-success;
	font-size: 28rpx;
    .title {
      display: inline-block;
      width: 140rpx;
      height: 120rpx;
      line-height: 120rpx;
      text-align: left;
      font-weight: bold;
    }
    .info {
      color: rgb(97, 97, 97);
    }
    .icon-qianjin {
      display: inline-block;
      width: 40rpx;
      height: 120rpx;
      line-height: 120rpx;
      text-align: center;
      font-weight: bold;
    }
  }
}
</style>